<template>
  <div class="as-date-pick__month_body">
    <table>
      <tbody>
        <tr v-for="(item,rowIndex) in 3"
            :key="rowIndex">
          <td v-for="(item,colIndex) in 4"
              :key="colIndex">
            <span class="num"
                  @click="changeMonth(rowIndex*4+colIndex)"
                  :class="[
                    {today:+visible.year === +now.year &&
                           rowIndex*4+colIndex === +now.month-1,
                     active:+visible.year === +active.year &&
                           rowIndex*4+colIndex === +active.month-1}
                  ]">
              {{weekList[rowIndex*4+colIndex]}}
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "AsDatePickMonthBody",
  props: {
    visible: Object,
    now: Object,
    active: Object,
    visibleType: String,
    type: String
  },
  data() {
    return {
      weekList: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ]
    };
  },
  methods: {
    changeMonth(month) {
      this.visible.setMonth(month + 1);
      if (this.type === "month") {
        this.active.setDate(this.visible.year, month + 1, 1);
        this.$emit("change");
      } else {
        this.$emit("update:visibleType", "day");
      }
    }
  }
};
</script>
